<div class="row">
    <div class="col mb-4">
        <div class="card">
            <div class="card-body">
                <div class="row mb-3">
                    <div class="col-12">
                        <filter-list request="request" callback="getList(pageIndex)"></filter-list>
                    </div>
                </div>
                <div class="row justify-content-end">
                    <div class="col-4">
                        <div class="input-group input-group-sm mr-sm-2">
                            <div class="input-group-prepend">
                                <div class="input-group-text"><i class="fas fa-user-tag"></i></div>
                            </div>
                            <input type="text" class="form-control" ng-model="role.name" ng-enter="createRole()"
                                placeholder="Enter new role name...">
                            <div class="input-group-append">
                                <a href="#" class="btn btn-primary px-4" ng-click="createRole()"><i
                                        class="fas fa-plus"></i> Create</a>
                            </div>
                        </div>
                    </div>
                </div>
                <hr>
                <table class="table table-sm table-hover" cellspacing="0">
                    <thead class="thead-light">
                        <tr>
                            <th scope="col">
                                Role Name
                            </th>
                            <th scope="col">
                                Normalized Name
                            </th>
                            <th scope="col">
                                Id
                            </th>
                            <th scope="col">
                                Concurrency Stamp
                            </th>

                            <th scope="col" style="width: 5%;"></th>
                        </tr>
                    </thead>
                    <tbody class="sortable" ng-init="getList()">
                        <tr ng-repeat="item in data track by $index" class="sortable-item" sort-model="role"
                            sort-model-id="{{item.id}}">
                            <td>
                                <small ng-bind="item.name"></small>
                            </td>
                            <td>
                                <small ng-bind="item.normalizedName"></small>
                            </td>
                            <td>
                                <small ng-bind="item.id" class="text-black-50"></small>
                            </td>
                            <td>
                                <small ng-bind="item.concurrencyStamp" class="text-black-50"></small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <a href="/portal/role/details/{{item.id}}" class="btn btn-link text-primary">
                                        <span class="fa fa-pen"></span>
                                    </a>
                                    <a ng-click="remove(item.name);" class="btn btn-link text-danger">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">
                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                    scroll-top="true">
            </div>
        </div>
    </div>
</div>